ترغب في إضافة شريط تقدم القراءة في بلوجر ؟ لإضافة شريط تقدم القراءة في بلوجر وجعل مدونتك بلوجر تبدو مذهلة، اتبع الخطوات التالية بعناية.
 |
| كيفيةإضافة شريط تقدم القراءة في بلوجر ؟2025 |
ما هو شريط تقدم القراءة؟
باختصار، يوضح شريط تقدم القراءة مقدار ما تبقى من منشور المدونة الذي يتعين قراءته. ومن خلال تتبع موقع الزائر على الصفحة، يتم إنجاز ذلك. يبدأ الشريط في الامتلاء أثناء التمرير لأسفل، مما يوضح مقدار التقدم الذي أحرزه. ويمتلئ الشريط بمجرد وصوله إلى نهاية المنشور.
ما هي الحاجة إلى شريط تقدم القراءة؟
يقضي المستخدمون بضع ثوانٍ فقط على موقع ويب قبل أن يقرروا البقاء أم لا. عندما تنشر مقالات طويلة يتعين على المستخدمين التمرير لأسفل لقراءتها، يصبح من الصعب بعض الشيء الحفاظ على اهتمامهم.
يقوم بعض مالكي مواقع الويب بإبقاء الأشخاص على الصفحة من خلال وضع المنشورات ذات الصلة بجوار بعضها البعض، بينما يستخدم البعض الآخر مقاطع الفيديو أو معرض الصور.
يعد شريط تقدم القراءة تحسينًا لواجهة المستخدم التي تعمل باللمس والتي تشجع المستخدمين على التمرير لأسفل. كما يشجع الأشخاص على إنهاء ما يقرؤونه.
تستخدم العديد من المواقع الإلكترونية الشهيرة، مثل Daily Beast، مؤشرات تقدم القراءة لجذب اهتمام القراء. ولكن قد تحتاج أيضًا إلى التأكد من أن مؤشر تقدم القراءة ليس واضحًا للغاية ولا يجعل من الصعب على الأشخاص استخدام موقعك الإلكتروني.
حسنًا، دعونا نلقي نظرة على مدى سهولة إضافة شريط تقدم القراءة في بلوجر.
كيفية إضافة شريط تقدم القراءة في بلوجر؟
سأعرض لكم كيفية إضافة شريط تقدم القراءة في Blogger ، لذا دعونا نبدأ!
الخطوة 1: انتقل إلى لوحة تحكم Blogger.
الخطوة 2: انتقل إلى قسم السمات وانقر فوق تحرير HTML.
الخطوة 3: قم بلصق كود CSS الموجود أدناه قبل علامة ]]></b:skin> مباشرةً
/* Progress Reading Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
الخطوة 4: انسخ كود JS المقدم أدناه والصقه أعلى علامة </body> .
<script>
window.onscroll = function() {
myFunction()
};
function myFunction(){
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
الخطوة 5: انسخ الكود HTML أدناه والصقه بعد العلامة <body> .
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>
الخطوة6: حفظ الموضوع.
قم بزيارة موقعنا للحصول على أحدث نصائح التدوين وقوالب Blogger ونصوص Blogger ونصائح SEO ونصائح Adsense لزيادة أرباحك.
خاتمة
حسنًا، أصدقائي، هل أعجبتكم هذه التدوينة حول كيفية إضافة شريط تقدم القراءة في بلوجر؟ يجب أن تعرفوا الآن كيفية إضافة شريط تقدم القراءة إلى بلوجر.
كيف جعلك هذا المقال حول كيفية إضافة شريط تقدم القراءة في بلوجر تشعر؟ من خلال ترك تعليق حتى نتمكن جميعًا من التعلم من أفكارك وتحسين شيء ما.
معلومات الكاتب
اديب القربعي كنز المعلومات
اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر